<template>
  <div class="Pnews">
    <Pheader class="tou" msg="我的消息"></Pheader>
    <div class="tableNews">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{background:'#f2f2f2'}"
        :default-sort="{prop: 'date', order: 'descending'}"
      >
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="date" sortable label="发送时间"></el-table-column>
        <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <router-link to="/home/P_news/P_newsdetail">
              <el-button id="check" @click="showClick()" type="text" size="small">查看</el-button>
            </router-link>
            <el-button
              id="delete"
              @click="del(index)"
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
//头部小组件
import Pheader from "@/components/P_header.vue";
import Qs from "qs";
export default {
  components: {
    Pheader
  },
  created() {
    var _this = this;
    this.$axios({
      method: "post",
      url: "http://localhost:3000/recentlook/news",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    })
      .then(response => {
        _this.tableData = response.data.result;
        _this.code = response.data.code;
        for (var i = 0; i < _this.tableData.length; i++) {
          this.index = response.data.result[i].id;
          window.console.log(this.index);
        }
        window.console.log(_this.tableData);
      })
      .catch(function(error) {
        _this.data = error;
      });
  },
  data() {
    return {
      tableData: [],
      index: Number,
      show: true
    };
  },
  methods: {
    showClick(row) {
      window.console.log(row);
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    del(index) {
      this.show = false;
      // 转换为字符串
      let data = Qs.stringify({ id: index, ad: "0" });
      this.$axios({
        method: "post",
        data: data,
        url: "http://localhost:3000/recentlook/delnews",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
        .then(response => {
          window.console.log(response.data);
        })
        .catch(function(error) {
          window.console.log(error);
        });
    }
  }
};
</script>

<style>
.Pnews {
  width: 100%;
  height: 488px;
  border: 1px solid #e7e7e7;
  /* margin-left:1%; */
  /* position: absolute;
  top: 0px;
  left: 0px; */
  background: #fff;
  position: relative;
}
.Pnews .tou {
  padding: 12px 13px;
  border-bottom: 1px solid #e7e7e7;
}
.tableNews {
  margin: 20px;
  border-right: 1px solid #e7e7e7;
}
.tableNews table {
  margin-top: 0px;
  margin-bottom: 0px;
  border: 0;
}
.tableNews tbody {
  font-size: 14px;
}
#check span {
  color: #4b943d !important;
  border-right: 1px solid #999;
  padding-right: 5px;
}
#delete span {
  color: #4b943d !important;
}
</style>
